	.top-container {
		background-image: linear-gradient(rgba(245, 36, 0, 0.6), rgba(245, 36, 0, 0.2));
		padding: 30rpx 0;

		.title-box {
			width: 95%;
			margin: 20rpx auto;
			display: flex;

			.left-box {
				position: relative;

				image {
					width: 150rpx;
					height: 150rpx;
					border-radius: 20rpx;
				}

				span {
					position: absolute;
					right: 0;
					top: 0;
					font-size: 14rpx;
					color: #fff;
					background-color: rgba(217, 217, 217, .5);
					padding: 0 10rpx;
					border-radius: 10rpx;
				}
			}

			.title-right {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 150rpx;
				margin-left: 20rpx;

				.title {
					font-size: 30rpx;
					font-weight: 600;
					color: #fff;
				}

				.creater {
					display: flex;

					image {
						width: 50rpx;
						height: 50rpx;
						margin-right: 20rpx;
						border-radius: 50%;
					}

					span {
						display: block;
						line-height: 50rpx;
						font-size: 26rpx;
						color: #f4f4f4;
					}
				}
			}
		}

		.share-box {
			width: 95%;
			margin: 20rpx auto;
			display: flex;

			.share-item {
				flex: 1;
				margin: 0 10rpx;
				height: 60rpx;
				line-height: 60rpx;
				background-color: rgba(255, 255, 255, .4);
				border-radius: 20rpx;
				font-size: 28rpx;
				text-align: center;
				color: #ffffff;
			}
		}
	}

	.list-container {
		position: absolute;
		width: 100%;
		background-color: #fff;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		padding-bottom: 150rpx;

		.song-box {
			width: 95%;
			height: 80rpx;
			margin: 20rpx auto;
			display: flex;
			justify-content: space-between;
			
			.songs{
				display: flex;
				
				.rank {
					width: 50rpx;
					line-height: 80rpx;
					margin-right: 20rpx;
					font-size: 30rpx;
					font-weight: 600;
					color: #d6d6d6;
				}
				
				.song-detail {
					margin: auto 0;
					.song-name {
						font-size: 26rpx;
					}
				
					.song-ar {
						font-size: 20rpx;
						color: #b5b5b5;
					}
				}
			}
		}
	}

	.audio-box {
		display: flex;
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 150rpx;
		text-align: center;
		background-color: rgb(252, 252, 252);

		image {
			width: 80rpx;
			height: 80rpx;
			display: block;
			margin: auto;
			border-radius: 20rpx;
		}

		audio {
			text-align: left;
			display: block;
			margin: auto;
		}
	}
	
	.pop-box {
		width: 100%;
		height: 80vh;
		padding: 50rpx 0rpx;
		padding-bottom: 150rpx;
		
		.pop-title {
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx;
			
			image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 10rpx;
			}
			
			.title-right {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				width:70%;
				
				.title {
					font-size: 28rpx;
				}
				
				.creater{
					font-size: 24rpx;
					color: rgba(0, 65, 197, 0.8);
				}
			}
		}
		
		.comment-box {
			padding: 0 30rpx;
			
			.comment-menu {
				display: flex;
				justify-content: space-between;
				
				.menu-right{
					display: flex;
					
					span {
						display: block;
						margin: 0 20rpx;
						font-size: 26rpx;
						color: #b5b5b5;
					}
				}
			}
			
			.comment-detail {
				margin: 40rpx 0;
				
				.comment-author {
					display: flex;
					justify-content: space-between;
					
						.author-box {
							display: flex;
								
								image {
									width: 60rpx;
									height: 60rpx;
									border-radius: 50%;
									margin: auto 0;
									margin-right: 20rpx;
								}
								
								.comment-name {
									display: flex;
									flex-direction: column;
									justify-content: space-between;
									
									.name {
										font-size: 28rpx;
									}
									
									.time {
										display: flex;
										font-size: 24rpx;
										color: #b5b5b5;
										
										span {
											display: block;
											margin-left: 20rpx;
											color: #0045d1;
										}
									}
								}
						}
						
						.star {
							margin: auto 0;
						}
				}
				
				.comment-content{
					font-size: 28rpx;
					margin: 20rpx 0;
					margin-left: 80rpx;
				}
			}
		}
	}
	.loading {
		position: fixed;
		bottom: 100rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 9999999;
	}
	
	.comment-ipt{
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		z-index: 999999;
		
		input {
			width: 95%;
			height: 80rpx;
			margin: auto;
			background-color: rgba(181,181,181,.2);
			border-radius: 20rpx;
			text-indent: 1em;
		}
	}